<template>
    
    <el-card>
      <h2>脚本库</h2>
      <div class="mbox">
        <!-- <div class="leftMenu" v-if="isShow" 
        :collapse="isShow">
          <Menu></Menu>
        </div>
       <div class="button">
          <el-button class="showBtn" @click="showFun">
            <el-icon v-if="isShow"><ArrowLeftBold /></el-icon>
            <el-icon v-else><ArrowRightBold /></el-icon>
          </el-button>
        </div> -->
        <div class="rightContent">
          
          <Content></Content>
        </div>
      </div>
      </el-card>
</template>

<script lang="ts" setup>
import { ref,defineAsyncComponent } from 'vue';
// import { ArrowLeftBold,ArrowRightBold } from '@element-plus/icons-vue'
// const Menu = defineAsyncComponent(() => import('./form/menu.vue')); 
const Content = defineAsyncComponent(() => import('./form/content.vue')); 
const isShow = ref(true);

// 保留isShow变量以备将来使用
// const showFun = ()=>{
//   isShow.value = !isShow.value;
// }
</script>

<style lang="scss" scoped>
.mbox{
  position: relative;
  display: flex;
    align-items: center;
  .leftMenu{
    width: 200px;
    background: #f5f5f5;
    height: -webkit-fill-available;
  }
  .button{
    width: 50px;
    .showBtn{
      width: 17px;
      height: 50px;
      border-radius: 10%;
      background: #f5f5f5;
      cursor: pointer;
      padding: 0;
      border:none;
      &:hover{
        color: #409EFF;
      }
    }
  }
  .rightContent{
    flex: 1;
  }
}
</style>
